<template>
  <div>
    <n-spin :show="loading" description="请稍候...">
      <n-modal
        v-model:show="showModal"
        :mask-closable="false"
        :show-icon="false"
        preset="dialog"
        transform-origin="center"
        :title="formValue.code > 0 ? '编辑 #' + formValue.code : '添加'"
        :style="{
          width: dialogWidth,
        }"
      >
        <n-scrollbar style="max-height: 87vh" class="pr-5">
          <n-form
            :model="formValue"
            :rules="rules"
            ref="formRef"
            :label-placement="settingStore.isMobile ? 'top' : 'left'"
            :label-width="100"
            class="py-4"
          >
            <n-form-item label="name" path="name">
            <n-input type="textarea" placeholder="name" v-model:value="formValue.name" />
          </n-form-item>

          <n-form-item label="last_price" path="lastPrice">
            <n-input-number placeholder="请输入last_price" v-model:value="formValue.lastPrice" />
          </n-form-item>

          <n-form-item label="change_percent" path="changePercent">
            <n-input-number placeholder="请输入change_percent" v-model:value="formValue.changePercent" />
          </n-form-item>

          <n-form-item label="change_amount" path="changeAmount">
            <n-input-number placeholder="请输入change_amount" v-model:value="formValue.changeAmount" />
          </n-form-item>

          <n-form-item label="volume" path="volume">
            <n-input-number placeholder="请输入volume" v-model:value="formValue.volume" />
          </n-form-item>

          <n-form-item label="turnover" path="turnover">
            <n-input-number placeholder="请输入turnover" v-model:value="formValue.turnover" />
          </n-form-item>

          <n-form-item label="amplitude" path="amplitude">
            <n-input-number placeholder="请输入amplitude" v-model:value="formValue.amplitude" />
          </n-form-item>

          <n-form-item label="high" path="high">
            <n-input-number placeholder="请输入high" v-model:value="formValue.high" />
          </n-form-item>

          <n-form-item label="low" path="low">
            <n-input-number placeholder="请输入low" v-model:value="formValue.low" />
          </n-form-item>

          <n-form-item label="open" path="open">
            <n-input-number placeholder="请输入open" v-model:value="formValue.open" />
          </n-form-item>

          <n-form-item label="closed" path="closed">
            <n-input-number placeholder="请输入closed" v-model:value="formValue.closed" />
          </n-form-item>

          <n-form-item label="volume_ratio" path="volumeRatio">
            <n-input-number placeholder="请输入volume_ratio" v-model:value="formValue.volumeRatio" />
          </n-form-item>

          <n-form-item label="turnover_rate" path="turnoverRate">
            <n-input-number placeholder="请输入turnover_rate" v-model:value="formValue.turnoverRate" />
          </n-form-item>

          <n-form-item label="pe_ratio" path="peRatio">
            <n-input-number placeholder="请输入pe_ratio" v-model:value="formValue.peRatio" />
          </n-form-item>

          <n-form-item label="pb_ratio" path="pbRatio">
            <n-input-number placeholder="请输入pb_ratio" v-model:value="formValue.pbRatio" />
          </n-form-item>

          <n-form-item label="market_cap" path="marketCap">
            <n-input-number placeholder="请输入market_cap" v-model:value="formValue.marketCap" />
          </n-form-item>

          <n-form-item label="circulating_market_cap" path="circulatingMarketCap">
            <n-input-number placeholder="请输入circulating_market_cap" v-model:value="formValue.circulatingMarketCap" />
          </n-form-item>

          <n-form-item label="rise_speed" path="riseSpeed">
            <n-input-number placeholder="请输入rise_speed" v-model:value="formValue.riseSpeed" />
          </n-form-item>

          <n-form-item label="change_5min" path="change5Min">
            <n-input-number placeholder="请输入change_5min" v-model:value="formValue.change5Min" />
          </n-form-item>

          <n-form-item label="change_ercent_60day" path="changeErcent60Day">
            <n-input-number placeholder="请输入change_ercent_60day" v-model:value="formValue.changeErcent60Day" />
          </n-form-item>

          <n-form-item label="ytd_change_percent" path="ytdChangePercent">
            <n-input-number placeholder="请输入ytd_change_percent" v-model:value="formValue.ytdChangePercent" />
          </n-form-item>

          <n-form-item label="date" path="date">
            <n-input type="textarea" placeholder="date" v-model:value="formValue.date" />
          </n-form-item>

          <n-form-item label="流入" path="inflow">
            <n-input-number placeholder="请输入流入" v-model:value="formValue.inflow" />
          </n-form-item>

          <n-form-item label="流出" path="outflow">
            <n-input-number placeholder="请输入流出" v-model:value="formValue.outflow" />
          </n-form-item>

          <n-form-item label="净流入" path="netInflow">
            <n-input-number placeholder="请输入净流入" v-model:value="formValue.netInflow" />
          </n-form-item>


          </n-form>
        </n-scrollbar>
        <template #action>
          <n-space>
            <n-button @click="closeForm">取消</n-button>
            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
          </n-space>
        </template>
      </n-modal>
    </n-spin>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Edit, View } from '@/api/stockZhASpotEm';
  import { rules, options, State, newState } from './model';
  import { useProjectSettingStore } from '@/store/modules/projectSetting';
  import { useMessage } from 'naive-ui';
  import { adaModalWidth } from '@/utils/hotgo';

  const emit = defineEmits(['reloadTable']);
  const message = useMessage();
  const settingStore = useProjectSettingStore();
  const dialogWidth = ref('75%');
  const loading = ref(false);
  const showModal = ref(false);
  const formValue = ref<State>(newState(null));
  const formRef = ref<any>({});
  const formBtnLoading = ref(false);

  function confirmForm(e) {
    e.preventDefault();
    formBtnLoading.value = true;
    formRef.value.validate((errors) => {
      if (!errors) {
        Edit(formValue.value).then((_res) => {
          message.success('操作成功');
          setTimeout(() => {
            showModal.value = false;
            emit('reloadTable');
          });
        });
      } else {
        message.error('请填写完整信息');
      }
      formBtnLoading.value = false;
    });
  }

  function closeForm() {
    showModal.value = false;
    loading.value = false;
  }

  function openModal(state: State) {
    adaModalWidth(dialogWidth);
    showModal.value = true;
    loading.value = true;

    // 新增
    if (!state || state.id < 1) {
      formValue.value = newState(state);
      return;
    }

    // 编辑
    View({ id: state.id })
      .then((res) => {
        formValue.value = res;
      })
      .finally(() => {
        loading.value = false;
      });
  }

  defineExpose({
    openModal,
  });
</script>

<style lang="less"></style>